import Vue from 'vue'
import Vuex from 'vuex'
import request from './modules/request'
import song from './modules/song'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
    console.log('mutation提交数据')
    // console.log(JSON.stringify(state))
    console.log(process.env.NODE_ENV)
  })
}

const logger = createLogger({
  collapsed: false, // 自动展开记录的 mutation
  filter(mutation, stateBefore, stateAfter) {
    // 若 mutation 需要被记录，就让它返回 true 即可
    // 顺便，`mutation` 是个 { type, payload } 对象
    return mutation.type !== "aBlacklistedMutation"
  },
  transformer(state) {
    // 在开始记录之前转换状态
    // 例如，只返回指定的子树
    return state.subTree
  },
  mutationTransformer(mutation) {
    // mutation 按照 { type, payload } 格式记录
    // 我们可以按任意方式格式化
    return mutation.type
  },
  logger: console, // 自定义 console 实现，默认为 `console`
})

const store = new Vuex.Store({
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPlugin, logger]
    : [],
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    request,
    song
  }
})

// 监听器
// store.subscribe((mutation, state) => {
//   console.error(mutation.type)
//   console.error(mutation.payload)
// })
//
// store.subscribeAction((action, state) => {
//   console.log(action.type)
//   console.log(action.payload)
// })
//
// store.subscribeAction({
//   before: (action, state) => {
//     console.log(`before action ${action.type}`)
//   },
//   after: (action, state) => {
//     console.log(`after action ${action.type}`)
//   }
// })

export default store
